<template>
	<view class="main-box">
		<u-navbar title="易购数字券" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight">
		</u-navbar>
		<view>
			<view class="padding-lr padding-top-sm" style="background: #e60000;">
				<view class="top-box" :style="{'background-image': 'url('+ cardBg +')'}">
					<view class="font-12 padding-top-sm">易购券余额</view>
					<view class="amount">{{ walletInfo.ebuyCoupon || 0 }}</view>
					<view class="top-text">
						<view class="top-text-tab" style="border-right: 2rpx solid #840204;" @tap="toLink(true)">购卡记录</view>
						<view class="top-text-tab" @tap="toLink(false)">消费明细</view>
					</view>
				</view>
			</view>
			<view class="bg-theme">
				<view class="bg-white padding" style="border-radius: 20rpx 20rpx 0 0;">
					<view class="margin-bottom flex flex-col-center">
						<text class="title-block"></text>
						<text class="text-bold font-18">购卡</text>
					</view>
					<view class="tab-list">
						<view class="tab-item" :class="{'item-active': tabActiveIndex == index}" v-for="(item, index) in tabList" :key="index" @click="selectTab(item, index)">
							<view>
								<text class="font-12">￥</text>
								<text class="font-20">{{item.label}}</text>
							</view>
							<view class="font-10 desc">{{item.desc}}</view>
						</view>
					</view>
					
					<view class="flex align-center price-box">
						<view class="price-icon">￥</view>
						  <u--input
						    placeholder="请输入自定义金额"
						    border="none"
						    v-model="rechargeAmount"
						    @change="changeRechargeAmount"
						  ></u--input>
					</view>
					
					<view class="font-10 text-black9" style="line-height: 34rpx;">
						<view>购卡说明</view>
						<view>1.购卡赠送购卡金额1:1贡献值，分12个月赠送，每月购卡日期赠送。</view>
						<view>2.此卡仅限于在珺璟平台和珺璟平台点外卖消费。</view>
						<view>3.若遇到购卡未到账，请联系客服。</view>
					</view>
					
					<view class="recharge-btn" @tap="buyCard">购卡</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		wallet
	} from '@/common/api/customer.js'
	import {
		orderCreate
	} from '@/common/api/order.js'
	import {
		productList
	} from '@/common/api/product.js'
	export default {
		data() {
			return {
				cardBg: '/static/my/ebay-bg.png',
				tabList: [{
					label: '1000',
					desc: '送1000贡献值',
					value: 1
				}, {
					label: '2000',
					desc: '送2000贡献值',
					value: 2
				}, {
					label: '3000',
					desc: '送3000贡献值',
					value: 3
				}, {
					label: '4000',
					desc: '送4000贡献值',
					value: 4
				}, {
					label: '5000',
					desc: '送5000贡献值',
					value: 5
				}, {
					label: '6000',
					desc: '送6000贡献值',
					value: 6
				}],
				tabActiveIndex: 0,
				rechargeAmount: null,
				walletInfo: {},
				productList: []
			}
		},
		computed: {
			
		},
		onLoad(options) {
			this.getProductList()
		},
		onShow() {
			this.getWallet()
		},

		methods: {
			toLink(incomeFlag) {
				let title = incomeFlag ? '购卡' : '消费明细'
				uni.navigateTo({
					url: '/pages/my/wallet/walletRecords?walletType=' + 7 + '&title=' + title + '&incomeFlag=' + incomeFlag
				})
			},
			getProductList() {
				productList({pageNo: 1, pageSize: 10, areaId: 6}).then(res => {
					this.productList = res.data || []
				})
			},
			// 获取用户钱包
			getWallet() {
				wallet().then(res => {
					this.walletInfo = res.data || {}
				})
			},
			changeRechargeAmount(e) {
				if(e) {
					this.tabActiveIndex = -1
				}
			},
			selectTab(item, index) {
				this.rechargeAmount = null
				this.tabActiveIndex = index
			},
			buyCard() {
				let payAmount = 0
				if(this.rechargeAmount) {
					if(this.rechargeAmount > 10000) {
						return this.$msg('金额不能大于10000')
					}
					payAmount = this.rechargeAmount
				} else {
					payAmount = this.tabList[this.tabActiveIndex].label
					console.log("this.tabList[this.tabActiveIndex].label", this.tabList[this.tabActiveIndex].label)
				}
				uni.showLoading({
					title: '订单提交中',
					mask: true
				})
				orderCreate({
					productId: this.productList[0].productId ,
					payAmount: payAmount,
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						uni.navigateTo({
							url: '/pages/order/payOrder?orderId=' + res.data + '&areaId=' + this.productList[0].productArea+'&productId='+this.productList[0].productId
						})
					} else {
						this.$msg(res.msg)
					}
					console.log("res", res)
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.price-box {
		width: 100%;
		height: 106rpx;
		background: #F9F8F8;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		.price-icon {
			color: #E60000;
			font-size: 40rpx;
			margin-right: 20rpx;
		}
	}

	.text-bold {
		font-weight: bold;
	}

	.top-box {
		background-size: 100% 100%;
		width: 686rpx;
		height: 376rpx;
		padding: 30rpx;
		position: relative;

		.amount {
			font-size: 52rpx;
			font-weight: bold;
			margin-top: 14rpx;
		}
		.top-text {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 106rpx;
			.top-text-tab {
				width: 50%;
				text-align: center;
				font-size: 30rpx;
				color: #840204;
			}
		}
	}

	.title-block {
		display: inline-block;
		width: 10rpx;
		height: 46rpx;
		background: #E60000;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.tab-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.tab-item {
			width: 218rpx;
			height: 106rpx;
			background: #FFF6F6;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.desc {
				color: #999999;
			}
		}
		.item-active {
			color: #ffffff;
			background: #E60000;
			.desc {
				color: #ffffff;
			}
		}
	}

	.rich-box {
		margin-top: 10rpx;
		color: #B3B3B3;
		font-size: 24rpx;
	}

	.recharge-btn {
		width: 566rpx;
		height: 83rpx;
		background: #E60000;
		border-radius: 50rpx;
		margin: 70rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
		letter-spacing: 4rpx;
	}
</style>